import React, { useState } from 'react';
import { View, Text, Image } from '@tarojs/components'
import Modal from '../../../components/modal'
import './index.scss';
import balanceIcon from '../../../assets/balance.png'
const avatar = 'https://pzdsoss.pzds.com//im/20231101/14974e47_1698833412584.png'

const Recharge = ({ isOpen, onClose }) => {
  const [pointsList, setPointsList] = useState([
    { num: '20', price: '20.00' },
    { num: '40', price: '40.00' },
    { num: '60', price: '60.00' },
  ])
  const [pointsIndex, setPointsIndex] = useState(0)
  return (
    <Modal isOpen={isOpen} onClose={onClose} position="bottom">
      <View className="Recharge_modal">
        <Image className="poster" src={avatar} mode="aspectFill" />
        <View className="desc">
          <Text>这是积分描述这是积分描述这是积分描述这是积分描述这是积分描述这是积分描述这是积分描述</Text>
        </View>
        <View className="points_list">
          {pointsList.map((item, index) => (
            <View className={`points_item ${pointsIndex === index ? 'active' : ''}`} onClick={() => setPointsIndex(index)} key={item.key}>
              <Image src={balanceIcon} />
              <Text>x {item.num}</Text>
              <Text>￥{item.price}</Text>
            </View>
          ))}
        </View>
        <View className="proceed_btn">
          <Text>继续</Text>
        </View>
      </View>
    </Modal>
  );
};
export default Recharge;